<template>
	<div class="flex">
		<div class="e-flex-1">
			<div class="container">
				<el-page-header @back="goBack" content="编辑公告"></el-page-header>
				<div class="flex">
					<div class="e-flex-1">
						<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="views-form">
							<el-form-item label="公告标题" prop="title">
								<el-input v-model="form.title" placeholder="请输入标题"></el-input>
							</el-form-item>
							<el-form-item label="公告类型" prop="noticetypeid">
								<el-select v-model="form.noticetypeid" placeholder="请选择">
									<el-option v-for="item in newsTypeList" :key="item.id" :label="item.name"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="作者" prop="author">
								<el-input v-model="form.author" placeholder="请输入公告作者"></el-input>
							</el-form-item>
							<el-form-item label="来源" prop="source">
								<el-input v-model="form.source" placeholder="请输入公告的来源"></el-input>
							</el-form-item>
							<el-form-item label="内容" prop="content">
								<Tinymce ref="editor" v-model="form.content" :height="400"></Tinymce>
							</el-form-item>
							<el-form-item label="是否隐藏" prop="ishide">
								<el-switch v-model="form.ishide" ></el-switch>
							</el-form-item>
							<el-form-item label="过期时间">
								<el-date-picker
									v-model="form.expiration"
									value-format="yyyy-MM-dd HH:mm:ss"
									type="datetime"
									placeholder="选择日期时间">
								</el-date-picker>
							</el-form-item>
							<div class="flex">
								<div>
									<el-form-item label="上传封面">
										<cropper-upload :zoomScale='[240,130]' :isCropper="true" @getUpload="handleFilesSuccess" class="avatar-uploader">
											<img v-if="form.coverphoto" :src="fileURL + form.coverphoto" class="avatar" style="width:240px;height:130px">
											<div class="avatar-uploader-icon" v-else style="width:240px;height:130px">
												<div><i class="el-icon-plus"></i></div>
												<div class="e-font-14">上传图片</div>
											</div>
										</cropper-upload>
										<div class="tips e-p-t-10">建议上传尺寸比例为240*130 </div>
									</el-form-item>
								</div>
							</div>
							<!-- <el-form-item label="文件上传">
								<div class="files-list">
									<div class="item" v-for="(item, index) in form.newsdetailfile" :key="index">
										<span class="icon">
											<span class="ext">{{ utils.getFileExt(item.savename).toUpperCase() }}</span>
											<i class="iconfont icon-DOCXtubiao"></i>
										</span>
										<div class="text">
											<div class="tl">{{ item.name }}</div>
											<span class="size">{{ utils.formatSize(item.size) }}</span>
										</div>
										<span class="el-icon-download e-p-15"
											@click.stop="previewFiles(fileURL + item.savename)"></span>
										<span class="el-icon-error err" @click.stop="delFile(index)"></span>
									</div>
									<div class="">
										<cropper-upload @getUpload="handleFilesSuccess3">
											<el-button class="e-flex-1 item upload el-btn" size="small"
												:loading="loading">
												<i class="el-icon-paperclip"></i>上传附件
											</el-button>
										</cropper-upload>
									</div>
								</div>
							</el-form-item> -->
							<el-form-item label="公告摘要">
								<el-input type="textarea" v-model="form.brief" :rows="5" placeholder="请输入内容">
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-button @click="goBack">返回</el-button>
								<el-button type="primary" @click="onSubmit()">保存</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	layout: 'admin',
	head() {
        return {
            title: '编辑公告-' + this.websetting.name
        }
    },
	data() {
		return {
			loading:false,
			form: {
				id: 0,
				noticetypeid: '',
				title: "",
				coverphoto: "",
				content: "",
				ishide: false,
				orderby: 0,
				sharephoto: "",
				brief: "",
				newsdetailfile: []
			},
			newsTypeList: [],
			rules: {
				title: [
					{ required: true, message: '请输入标题', trigger: 'blur' },
					{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
				],
				noticetypeid: [
					{ required: true, message: '请选择分类', trigger: 'change' }
				],
				enddate: [
					{ required: true, message: '请输入截止时间', trigger: 'blur' },
				],
				author: [
					{ required: true, message: '请输入作者', trigger: 'blur' },
					{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }

				],
				source: [
					{ required: true, message: '请输入公告的来源', trigger: 'blur' },
					{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }

				],
				content: [
					{ required: true, message: '请输入内容', trigger: 'blur' },
					
				]
			},
			props: { multiple: true }
		}
	},
	computed: {
		headers() {
			return this.$store.state.header
		}
	},
	mounted() {
		this.getTypeList()
        this.form.id = this.utils.toInt(this.$router.history.current.query.id)
        this.getViews(this.form.id)
    },
	methods: {
		goBack() {
			this.$router.go(-1)
		},
		getViews(id){
            this.$axios.get('//Notice/views?id='+id).then((res) => {
				let arr = res
                this.form = arr
            })
        },
		getTypeList() {
			this.$axios.post('/Admin/NoticeType/List', {
				"PageIndex": 1,
				"PageSize": 9999,
				"Key": ''
			}).then((res) => {
				this.newsTypeList = res.rows;
			})
		},
		onSubmit() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.$axios.post('//Notice/Edit', this.form).then((res) => {
						this.$message.success(res.msg);
						this.goBack()
					})
				} else {
					return false;
				}
			})
		},
		handleFilesSuccess(res, file) {
			if (file.status === "success") {
				this.loading = false
				this.form.coverphoto = res.path
			}
		},
		handleFilesSuccess3(res, file) {
			this.form.newsdetailfile.push({
				id: 0,
				savename: res.path,
				name: file.name,
				size: file.size
			});
		},
		previewFiles(url) {
			window.open(url)
		},
		delFile(index) {
			this.form.newsdetailfile.splice(index, 1);
		},
		changeSelect(val){
			console.log(val)
		}
	}
}
</script>

<style lang="scss" scoped>
.public-list {
	.public-item {
		padding-bottom: 20px;
		border-top: 1px solid #f1f1f1;

		.public-item-title {
			font-size: 16px;
			font-weight: 500;
			color: #303133;
			line-height: 25px;
			text-shadow: 1px 0 20px rgba(0, 0, 0, .08);
			margin-bottom: 7px;
			padding: 20px 0 0;
		}

		// .public-item-content {
		// 	// padding: 0 20px;
		// }
	}
}
</style>
